<template>
	<view class="content">
		<view class="block swiper-block">
			<swiper autoplay="true" indicator-dots="true" indicator-color="#999" indicator-active-color="#fff"
				class="swiper-item">
				<swiper-item :item-id="item.id" v-for="(item,index) in swiperList" :key="item.id" class="bg-item">
					<image :src="item.imgUrl" class="bg-img" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info-block">
			<view class="search-block">
				<view class="input-block">
					<view class="iconfont icon-sousuo"
						@click="navigate('/pages/search-list/search-list?keyWord='+name)"></view>
					<input placeholder="请输入搜索关键字" v-model="name" @confirm="search" placeholder-style="color:#0059FC;" />
				</view>
			</view>
			<view class="menu-block"
				style="background: url('https://travel-1306862033.cos.ap-chengdu.myqcloud.com/jinta-business/bg.png') no-repeat center;background-size: 100% 100%;">
				<view class="menu-list" v-for="(item,index) in menuList" :key="item.id"
					@click="menuJump(item.url,item.id)">
					<view class="menu-item">
						<image :src="item.iconImg" class="menu-img"></image>
						<view class="menu">{{item.menu}}</view>
					</view>
				</view>
			</view>
			<view class="supervise-content">
				<!-- <view class="title FangZhengHanZhenGuangBiaoJianTi">实时监督</view> -->
				<!-- <image src="/static/home/project.png" class="project-img"></image> -->
				<view class="fund-item" @click="navigate('/pages/supervise/detail')"
					style="background: url('https://gz.yshj.minshengjiandu.com/api/file/5.png') no-repeat center;background-size: 100% 80%;">
					<view class="tips" v-if="number>0">
						<view class="number" v-if="number<100">{{number}}</view>
						<view class="number1" v-else-if="number>99">{{number}}</view>
					</view>
					<view class="fund-title FangZhengHanZhenGuangBiaoJianTi" style="margin-top: 50rpx;">书记督、督书记、保落实
					</view>
				</view>
				<view class="project-item" @click="navigate('/pages/project/project')"
					style="background: url('https://gz.yshj.minshengjiandu.com/api/file/b78356.png') no-repeat center;background-size: 100% 80%;">
					<view class="project-title FangZhengHanZhenGuangBiaoJianTi">重点投资项目</view>
					<!-- <view class="project-btn">点击进入</view> -->
					<view class="overview-item">
						<view class="blue">
							<view class="round">
								<view class="inCircle"></view>
							</view>
							<view class="total">蓝灯<text style="margin: auto 4rpx;">{{count.projectBlueCount}}</text>个
							</view>
						</view>
						<view class="yellow">
							<view class="round1">
								<view class="inCircle"></view>
							</view>
							<view class="total">黄灯<text style="margin: auto 4rpx;">{{count.projectYellowCount}}</text>个
							</view>
						</view>
						<view class="red">
							<view class="round2">
								<view class="inCircle"></view>
							</view>
							<view class="total">红灯<text style="margin: auto 4rpx;">{{count.projectRedCount}}</text>个
							</view>
						</view>
					</view>
				</view>
				<view class="fund-item" @click="navigate('/pages/financial/financial')"
					style="background: url('https://gz.yshj.minshengjiandu.com/api/file/809d23.png') no-repeat center;background-size: 100% 80%;">
					<view class="fund-title FangZhengHanZhenGuangBiaoJianTi">争取资金</view>
					<view class="overview-item">
						<view class="blue">
							<view class="round">
								<view class="inCircle"></view>
							</view>
							<view class="total">蓝灯<text style="margin: auto 4rpx;">{{count.fundBlueCount}}</text>个
							</view>
						</view>
						<view class="yellow">
							<view class="round1">
								<view class="inCircle"></view>
							</view>
							<view class="total">黄灯<text style="margin: auto 4rpx;">{{count.fundYellowCount}}</text>个
							</view>
						</view>
						<view class="red">
							<view class="round2">
								<view class="inCircle"></view>
							</view>
							<view class="total">红灯<text style="margin: auto 4rpx;">{{count.fundRedCount}}</text>个</view>
						</view>
					</view>
				</view>
				<view class="fund-item" @click="navigate('/pages/business/business ')"
					style="background: url('https://gz.yshj.minshengjiandu.com/api/file/304b0e1.png') no-repeat center;background-size: 100% 80%;">
					<view class="fund-title FangZhengHanZhenGuangBiaoJianTi">招商引资</view>
					<view class="overview-item">
						<view class="blue">
							<view class="round">
								<view class="inCircle"></view>
							</view>
							<view class="total">蓝灯<text style="margin: auto 4rpx;">{{count.businessBlueCount}}</text>个
							</view>
						</view>
						<view class="yellow">
							<view class="round1">
								<view class="inCircle"></view>
							</view>
							<view class="total">黄灯<text style="margin: auto 4rpx;">{{count.businessYellowCount}}</text>个
							</view>
						</view>
						<view class="red">
							<view class="round2">
								<view class="inCircle"></view>
							</view>
							<view class="total">红灯<text style="margin: auto 4rpx;">{{count.businessRedCount }}</text>个
							</view>
						</view>
					</view>
				</view>
				<view class="fund-item" @click="navigate('/pages/work/work')"
					style="background: url('https://gz.yshj.minshengjiandu.com/api/file/78b19ad.png') no-repeat center;background-size: 100% 80%;">
					<view class="fund-title FangZhengHanZhenGuangBiaoJianTi" style="margin-top: 50rpx;">重点工作任务</view>
					<!-- 	<view class="fund-btn2">点击进入</view> -->
				</view>
				<!-- <view class="fund-item" @click="navigate('/pages/rural-revitalization/index')"
					style="background: url('https://gz.yshj.minshengjiandu.com/api/file/78b19ad.png') no-repeat center;background-size: 100% 80%;">
					<view class="fund-title FangZhengHanZhenGuangBiaoJianTi" style="margin-top: 50rpx;">乡村振兴专栏</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCountApi,
		getOpenidApi,
		getRedCount
	} from '@/api/home.js'
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		getwhiteListApi
	} from '@/api/supervise.js'
	export default {
		data() {
			return {
				number: 0,
				name: '',
				swiperList: [{
						id: 1,
						imgUrl: 'https://travel-1306862033.cos.ap-chengdu.myqcloud.com/jinta-business/banner_1.png'
					},
					{
						id: 2,
						imgUrl: 'https://travel-1306862033.cos.ap-chengdu.myqcloud.com/jinta-business/banner_2.png'
					}
				],
				menuList: [{
						id: 1,
						iconImg: '/static/home/leader.png',
						menu: '领导讲话',
						url: '/pages/leader/leader'
					}, {
						id: 2,
						iconImg: '/static/home/report.png',
						menu: '我要举报',
						url: '/pages/report/report'
					},
					// {
					// 	id: 3,
					// 	iconImg: '/static/home/investigate.png',
					// 	menu: '问卷调查',
					// 	url: '/pages/questionnaire/index'
					// },
					{
						id: 4,
						iconImg: '/static/home/advice.png',
						menu: '意见建议',
						url: '/pages/advice/index'
					},
					{
						id: 5,
						iconImg: '/static/home/baoguangtai.png',
						menu: '通报曝光',
						url: '/pages/lighthouse/index'
					}
				],
				count: {
					projectBlueCount: 2,
					projectYellowCount: 3,
					projectRedCount: 1,
					businessBlueCount: 1,
					businessRedCount: 2,
					businessYellowCount: 3,
					fundBlueCount: 2,
					fundRedCount: 1,
					fundYellowCount: 1,
				},
				openIdList: [],
				openId: '',
				state: 0
			}
		},
		onLoad() {
			//this.getList()
			this.getOpenId()
			this.getOpenIdList()
		},
		methods: {
			//onShareAppMessage 分享给朋友
			//onShareTimeline  分享到朋友圈
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					//title: this.list.jobTitle,
					path: '/pages/home/home'
				}
			},
			// #endif
			onShareTimeline(res) {
				let distSource = uni.getStorageSync('distSource');
				if (distSource) {
					return {
						//title: this.list.jobTitle,
						path: '/pages/home/home',
						type: 0,
						query: 'id=' + distSource,
					}
				}
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			search() {
				uni.navigateTo({
					url: '/pages/search-list/search-list?keyWord=' + this.name
				})
			},
			menuJump(url, id) {
				if (url) {
					uni.navigateTo({
						url: url + '?id=' + id
					})
				} else {
					uni.showToast({
						title: '该功能正在研发中QWQ~',
						icon: 'none'
					})
				}
			},
			jump(url) {
				let list = this.openIdList
				list.forEach((item, index) => {
					if (item.openid == this.openId) {
						this.state = 1
						uni.navigateTo({
							url
						})
					}
				})
				if (this.state == 0) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
				}
			},
			getOpenIdList() {
				getwhiteListApi({}).then(res => {
					this.openIdList = res || [];
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getCountApi({}).then(data => {
					uni.hideLoading()
					this.count = data;
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getOpenId() {
				wx.login({
					success: (login) => {
						const code = login.code;
						getOpenidApi({
							code
						}).then((res) => {
							this.openId = res.openid
							const openId = res.openid
							setStorage('openId', openId, 2678400);
						})
					}
				})
			},
			getCount() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getRedCount({}).then(data => {
					uni.hideLoading()
					this.number = data;
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onShow() {
			this.getCount()
			//this.getOpenIdList()
			this.name = ''
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;


		.block.swiper-block {
			height: 660rpx;
			width: 100%;

			.swiper-item {
				width: 100%;
				height: 660rpx;

				.bg-item {
					width: 100%;
					height: 100%;

					.bg-img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.info-block {
			display: flex;
			flex-direction: column;
			background: #FFF;
			margin-top: -200rpx;
			border-radius: 40rpx;
			height: auto;
			position: relative;

			//padding: 30rpx;
			.search-block {
				position: relative;
				width: 100%;
				height: 60rpx;
				padding: 30rpx 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 30rpx 0;

				.input-block {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					border: 1px solid #0059FC;
					border-radius: 40rpx;
					padding: 0 10rpx;
					height: 70rpx;

					.iconfont {
						flex-grow: 0;
						color: #0059FC;
						margin: 0 10rpx;
						font-weight: bold;
					}

					input {
						flex-grow: 1;
						font-size: 28rpx;
						color: #0059FC;
						margin: 0 10rpx;
					}
				}
			}

			.menu-block {
				width: 100%;
				display: flex;
				flex-direction: row;

				.menu-list {
					width: calc(100% / 4);
					margin-top: 20rpx;

					.menu-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						//margin-bottom: 20rpx;

						.menu-img {
							width: 110rpx;
							height: 110rpx;
						}

						.menu {
							margin-top: 10rpx;
							font-size: 26rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}

			.supervise-content {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 30rpx;
				margin-top: -20rpx;
				padding-bottom: 10rpx;

				.title {
					font-size: 20px;
					margin-top: -20rpx;
				}

				.project-item {
					width: 100%;
					padding: 10rpx;
					height: 180rpx;
					margin-bottom: -10rpx;
					margin-top: -10rpx;

					.project-title {
						position: relative;
						font-size: 16px;
						margin-top: 35rpx;
						margin-left: 10rpx;
					}

					.overview-item {
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						position: relative;
						margin-top: 20rpx;

						.blue {
							width: calc(100% /3);
							display: flex;
							flex-direction: row;

							.round {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #D5DDFC;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;

								.inCircle {
									position: relative;
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									background-color: #0059FC;
								}
							}
						}

						.total {
							font-size: 28rpx;
						}

						.yellow {
							width: calc(100% /3);
							display: flex;
							flex-direction: row;

							.round1 {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #FFE8CE;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;

								.inCircle {
									position: relative;
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									background-color: #FFA001;
								}
							}
						}

						.red {
							width: calc(100% /3);
							display: flex;
							flex-direction: row;

							.round2 {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #FFCEC3;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;

								.inCircle {
									position: relative;
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									background-color: #F80302;
								}
							}
						}
					}

					.project-btn {
						position: relative;
						width: 160rpx;
						height: 55rpx;
						border-radius: 40rpx;
						color: #fff;
						background-image: linear-gradient(to right, #F48710, #F9BC61);
						font-size: 14px;
						margin-top: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}

				.fund-item {
					width: 100%;
					padding: 10rpx;
					height: 180rpx;
					margin-bottom: -10rpx;
					margin-top: -10rpx;

					.tips {
						display: flex;
						justify-content: flex-end;

						.number {
							width: 40rpx;
							height: 40rpx;
							background-color: #F80302;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							align-content: center;
							font-size: 24rpx;
							color: #fff;


						}

						.number1 {
							padding: 4rpx 6rpx;
							background-color: #F80302;
							border-radius: 50%;
							font-size: 22rpx;
							color: #fff;
						}
					}

					.fund-title {
						position: relative;
						font-size: 16px;
						margin-top: 35rpx;
						margin-left: 10rpx;
					}

					.overview-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						position: relative;
						margin-top: 20rpx;
						padding-bottom: 20rpx;

						.blue {
							width: calc(100% /3);
							display: flex;
							flex-direction: row;

							.round {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #D5DDFC;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;

								.inCircle {
									position: relative;
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									background-color: #0059FC;
								}
							}
						}

						.total {
							font-size: 28rpx;
						}

						.yellow {
							width: calc(100% /3);
							display: flex;
							flex-direction: row;

							.round1 {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #FFE8CE;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;

								.inCircle {
									position: relative;
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									background-color: #FFA001;
								}
							}
						}

						.red {
							width: calc(100% /3);
							display: flex;
							flex-direction: row;

							.round2 {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								background-color: #FFCEC3;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;

								.inCircle {
									position: relative;
									width: 20rpx;
									height: 20rpx;
									border-radius: 50%;
									background-color: #F80302;
								}
							}
						}
					}

					.fund-btn {
						position: relative;
						width: 160rpx;
						height: 55rpx;
						border-radius: 40rpx;
						color: #fff;
						background-image: linear-gradient(to right, #2FD6A0, #62E5BB);
						font-size: 14px;
						margin-top: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.fund-btn1 {
						position: relative;
						width: 160rpx;
						height: 55rpx;
						border-radius: 40rpx;
						color: #fff;
						background-image: linear-gradient(to right, #0F81FD, #57A8FC);
						font-size: 14px;
						margin-top: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.fund-btn2 {
						position: relative;
						width: 160rpx;
						height: 55rpx;
						border-radius: 40rpx;
						color: #fff;
						background-image: linear-gradient(to right, #9A64FD, #B490FC);
						font-size: 14px;
						margin-top: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>